<template>
	<view class="container">
		<view class="brush-top">
			<view class="title">
				2023年公务员考试
			</view>
			
			<view class="right" >
				<text>{{nowIndex}}</text><text style="color: #888;">/{{brushList.length}}</text>
			</view>
		</view>
		<swiper :style="{height:h+'px'}" :current="nowIndex-1" :indicator-dots="false" :duration="200"
			@change="setNowIndex">
			<swiper-item class="swiper-item" :style="{marginLeft: k>0?'20rpx':'20rpx'}" v-for="(v,k) in brushList"
				:key="k">
				<view class="topic-title">
					<text class="topic-type">({{v.topicType==1?'单选题':'多选题'}})</text><text>{{v.topicTitle}}</text>
				</view>
				<view class="option-list">
					<view class="option-item" @click.stop="selectAnswer(sk,sv)" v-for="(sv,sk) in v.topicOption" :key="sk">
						<text class="serial-num" :style="{color:getColor(v,sv)?'#fff':'',background:getColor(v,sv),borderColor:getColor(v,sv)}">{{sv.option}}</text><text :style="{color:getColor(v,sv)}">{{sv.desc}}</text>
					</view>
				</view>
				<view class="answer-show" v-if="nowMode">
					<view class="title">
						<view class="">
							答案解析：<text style="color: #4395ff;">({{v.topicAnswer}})</text>
						</view> <view class="right"> <text class="iconfont iconbianji"></text> 纠错</view>
					</view>
					<view class="desc">
						{{v.topicAnswerDesc}} 
					</view>
				</view>
			</swiper-item>
		</swiper>
		<uni-popup ref="showBottom" style="position: relative;" type="bottom" background-color="#fff">
			<view class="card-title">
				答题卡
			</view>
			<view class="show-tips">
				<view class="item" style="background: #4395ff;border-color: #4395ff;">
					已答
				</view>
				<view class="item" style="color: #888;">
					未答
				</view>

			</view>
			<scroll-view style="height: 300px;" scroll-y>
				<view class="select-block">
					<view class="title">
						单选题
					</view>
					<view class="select-list">
						<view class="item" @click.stop="setIndex(k)" v-for="(v,k) in brushList" :key="k">
							<view class="serial-num" :class="(answerList[k]==v.topicAnswer?'rightColor':'')+(answerList[k]&&answerList[k]!=v.topicAnswer?'errorColor':'')">{{k+1}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="opt-label">
				<button class="item" @click.stop="clearAnswer" style="background: #888;border-color: #888;">
					重做
				</button>
				<button class="item" @click.stop="submit" style="background: #4395ff;border-color: #4395ff;">
					提交
				</button>
			</view>
		</uni-popup>
		<view class="opt-block">
			<view class="item">
				<view class="iconfont" :class="isCollect?'iconxin':'iconxihuan_huaban'"></view>
				<view >收藏题目</view>
						
			</view>
			<view class="item" @click.stop="showDrawer">
				<view class="iconfont icondingdan_huaban"></view>
				<view>答题卡</view>
			</view>
			<view class="item" @click.stop="stopTime">
				<view class="iconfont iconshijian"></view>
				<countdown ref="timer" :time="nowSeconds" isStop returnTime   @time="setTime" :hours="false" borderColor="#fff"  @end="endTime" ></countdown>
			</view>
		</view>
	</view>
</template>

<script>
	import countdown from '@/components/countdown'
	export default {
		components:{
			countdown,
		},
		data() {
			return {
				nowSeconds:1800,
				isCollect: 0,
				w:0,
				h: 0,
				nowIndex: 1,
				modeList: ['刷题', '背题'],
				nowMode:0,
				answerList:[],
				brushList: [{
						topicType: 1,
						topicTitle: '下列哪一项不是上好课的必要条件？（ ）。',
						topicAnswer:'A',
						topicAnswerDesc:'疯狂拉建档立卡交房大姐夫阿里快递费拉快点解封拉贷款发电房',
						topicOption: [{
								option: 'A',
								desc: '目的正确'
							},
							{
								option: 'B',
								desc: '内容正确'
							},
							{
								option: 'C',
								desc: '方法得当'
							},
							{
								option: 'D',
								desc: '手段先进'
							},
							{
								option: 'E',
								desc: '发电房房'
							}
						]
					},
					{
						topicType: 1,
						topicTitle: '下列哪一项不是上好课的必要条件？（ ）。',
						topicAnswer:'B',
						topicAnswerDesc:'疯狂拉建档立卡交房大姐夫阿里快递费拉快点解封拉贷款发电房',
						topicOption: [{
								option: 'A',
								desc: '目的正确'
							},
							{
								option: 'B',
								desc: '内容正确'
							},
							{
								option: 'C',
								desc: '方法得当'
							},
							{
								option: 'D',
								desc: '手段先进'
							},
							{
								option: 'E',
								desc: '发大水发大水'
							},
							{
								option: 'F',
								desc: '发生发大水'
							}
						]
					},
					{
						topicType: 1,
						topicTitle: '下列哪一项不是上好课的必要条件？（ ）。',
						topicAnswer:'B',
						topicAnswerDesc:'疯狂拉建档立卡交房大姐夫阿里快递费拉快点解封拉贷款发电房',
						topicOption: [{
								option: 'A',
								desc: '目的正确'
							},
							{
								option: 'B',
								desc: '内容正确'
							},
							{
								option: 'C',
								desc: '方法得当'
							},
							{
								option: 'D',
								desc: '手段先进'
							},
							{
								option: 'E',
								desc: '发大水发大水'
							},
							{
								option: 'F',
								desc: '发生发大水'
							}
						]
					},
					{
						topicType: 1,
						topicTitle: '下列哪一项不是上好课的必要条件？（ ）。',
						topicAnswer:'B',
						topicAnswerDesc:'疯狂拉建档立卡交房大姐夫阿里快递费拉快点解封拉贷款发电房',
						topicOption: [{
								option: 'A',
								desc: '目的正确'
							},
							{
								option: 'B',
								desc: '内容正确'
							},
							{
								option: 'C',
								desc: '方法得当'
							},
							{
								option: 'D',
								desc: '手段先进'
							},
							{
								option: 'E',
								desc: '发大水发大水'
							},
							{
								option: 'F',
								desc: '发生发大水'
							}
						]
					},
					{
						topicType: 1,
						topicTitle: '下列哪一项不是上好课的必要条件？（ ）。',
						topicAnswer:'B',
						topicAnswerDesc:'疯狂拉建档立卡交房大姐夫阿里快递费拉快点解封拉贷款发电房',
						topicOption: [{
								option: 'A',
								desc: '目的正确'
							},
							{
								option: 'B',
								desc: '内容正确'
							},
							{
								option: 'C',
								desc: '方法得当'
							},
							{
								option: 'D',
								desc: '手段先进'
							},
							{
								option: 'E',
								desc: '发大水发大水'
							},
							{
								option: 'F',
								desc: '发生发大水'
							}
						]
					},
					{
						topicType: 1,
						topicTitle: '下列哪一项不是上好课的必要条件？（ ）。',
						topicAnswer:'B',
						topicAnswerDesc:'疯狂拉建档立卡交房大姐夫阿里快递费拉快点解封拉贷款发电房',
						topicOption: [{
								option: 'A',
								desc: '目的正确'
							},
							{
								option: 'B',
								desc: '内容正确'
							},
							{
								option: 'C',
								desc: '方法得当'
							},
							{
								option: 'D',
								desc: '手段先进'
							},
							{
								option: 'E',
								desc: '发大水发大水'
							},
							{
								option: 'F',
								desc: '发生发大水'
							}
						]
					}
				],
			}
		},
		onLoad() {
			this.getWh()
			this.brushList.map(e=>{
				this.answerList.push('')
			})
			this.collection()
			
		},
		methods: {
			setTime(e){
				this.nowSeconds = e.seconds
			},
			endTime(e){
				console.log('结束了')
			},
			stopTime(){
				this.$refs.timer.endOfTime()
				uni.showModal({
					title:'暂停中',
					content:'共80道题，还有50道题未作答',
					cancelText:'结束考试',
					confirmText:'继续考试',
					success: (r) => {
						if(r.confirm){
							this.$refs.timer.reset()
						}else{
							
						}
					}
				})
			},
			clearAnswer(){
				let arr = []
				arr = this.answerList.map(e=>{
					return ''
				})
				this.answerList = arr
				this.$forceUpdate()
				this.closeDrawer()
				this.nowIndex = 1
			},
			selectAnswer(sk,sv){
				this.answerList[this.nowIndex-1] = sv.option
				this.$forceUpdate()
				if(this.nowIndex==this.brushList.length) return;
				setTimeout(()=>{
					this.nowIndex++
				},500)
			},
			setIndex(k){
				this.closeDrawer()
				this.nowIndex = k+1
			},
			getColor(v,sv){
				let answer = this.answerList[this.nowIndex-1]
				if(answer==v.topicAnswer&&answer==sv.option) return '#4395ff';
				if(answer!=v.topicAnswer&&answer==sv.option&&answer) return '#e43d33';
				return '';
			},
			getWh() {
				let res = uni.getSystemInfoSync();
				this.w = res.windowWidth;
				this.h = res.screenHeight
			},
			setMode(e) {
				this.nowMode = e.currentIndex
			},
			showDrawer() {
				this.$refs.showBottom.open();
			},
			closeDrawer() {
				this.$refs.showBottom.close();
			},
			setNowIndex(e) {
				this.nowIndex = parseInt(e.detail.current) + 1
				this.h = this.brushList[this.nowIndex - 1].topicOption.length * 88
			},
			setPage(opt = 0) {
				switch (parseInt(opt)) {
					case 0:
						if (this.nowIndex == 1) return;
						this.nowIndex--
						break;
					case 1:
						if (this.nowIndex == this.brushList.length) return;
						this.nowIndex++
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	.errorColor{
		border-color: $errorColor!important;background: $errorColor;color: #fff;
	}
	.rightColor{
		border-color: $themeColor!important;background: $themeColor;color: #fff;
	}
	.brush-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		padding: 25rpx;
		border-bottom: 1rpx #888 dashed;
		.title{
			width: 80%;
		}
		text {
			color: $themeColor;
		}
	}

	.noColor {
		color: #888 !important;
	}

	.swiper-item {
		padding: 25rpx 0 15rpx 0;

		.topic-title {
			font-size: 28rpx;
			width: 96%;

			.topic-type {
				color: $themeColor;
			}
		}

		.option-list {
			margin-top: 20rpx;
			.option-item {
				padding: 15rpx 0;
				.serial-num {
					display: inline-block;
					padding: 0rpx 10rpx;
					border: 1rpx #333 solid;
					border-radius: 50%;
					margin-right: 15rpx;
				}
			}
		}
	}
    .answer-show{
		margin-top: 25rpx;
		width: 95%;
		.title{
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.right{
				font-size: 25rpx;
				color: $themeColor;
				.iconfont{
					font-size: 25rpx;
					margin-right: 5rpx;
				}
			}
		}
		.desc{
			color: #555;
			margin: 25rpx 0;
			font-size: 28rpx;
		}
	}
	.opt-block {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: space-around;
		border-top: 1rpx #ccc solid;

		.item {
			text-align: center;
			font-size: 28rpx;
			padding: 15rpx;
		}
	}

	.card-title {
		padding: 15rpx 0;
		text-align: center;
		font-size: 30rpx;
		border-bottom: 1rpx #eee solid;
	}

	.show-tips {
		display: flex;
		align-items: center;
		padding: 15rpx;

		.item {
			font-size: 24rpx;
			color: #fff;
			border: 1rpx #888 solid;
			border-radius: 8rpx;
			margin-right: 15rpx;
			padding: 0rpx 10rpx;
		}

	}

	.select-block {
		padding: 15rpx;

		.title {
			text-align: center;
		}

		.select-list {
			margin-top: 15rpx;
			display: flex;
			flex-wrap: wrap;

			.item {
				padding: 15rpx 0;
				width: 20%;
				display: flex;
				justify-content: center;

				.serial-num {
					font-size: 28rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 80rpx;
					height: 80rpx;
					border: 1rpx #333 solid;
					border-radius: 50%;
				}
			}
		}
	}

	.opt-label {
		display: flex;
		justify-content: space-around;
		margin: 15rpx 0;

		.item {
			font-size: 25rpx;
			width: 40%;
			color: #fff;
		}
	}
</style>